<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <meta http-equiv="Pragma" content="no-cache" />
  <title>我的付款码</title>
  <link rel="stylesheet" href="css/weui.min.css" />
  <link rel="stylesheet" href="fonts/iconfont.css" />
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/fukuanma.css" />
  <script src="js/jquery-2.2.3.min.js"></script>
  <script src="js/weui.min.js"></script>
  <script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
</head>
<style>
    .weui-loadmore {
        width: 100%;
        height: 100%;
        font-size: 14px;
        text-align: center;
        position: absolute;
        background: #20A0FF;
        z-index: 999;
        color: #fff;
        margin: 0px;
        line-height: 500px;
    }

    .weui-loading {
        width: 40px;
        height: 40px;
    }
</style>
<body ontouchstart class="bg_ma">
  <div class="weui-content">
    <div class="loading" style="display:none;">
      <div class="weui-loadmore">
        <i class="weui-loading"></i>
      </div>
    </div>
    <div class="paycode">
      <div class="paycode-hd"><i class="iconfont icon-wxpay"></i> 向商家付款</div>
      <div class="paycode-bd">
        <div class="txt"><i class="iconfont icon-saomiao"></i> 商家扫码付款</div>
        <div class="code" id="qrcode"></div>
      </div>
      <div class="paycode-ft">
        <i class="iconfont icon-yongjin"></i>
        当前余额：&yen;
        <span id="totalBalance">0</span>
        <div class="text">
          &emsp;福利金&yen;
          <span id="welfare">0</span>

          &emsp;&emsp;&emsp;&emsp;&emsp;现金&yen;
          <span id="cash">0</span>
        </div>
      </div>
      <div class="paycode-bottom">
        <span>系统默认扣数规则;先扣除福利金额</span>
      </div>
    </div>
  </div>
</body>
<script src="./api.js"></script>
<script>
  window.onload = function () {
    $('.loading').css('display', 'block');
    let api = getApi()
    let userinfo = JSON.parse(localStorage.getItem('wxUserInfo')).data
    let customerID = userinfo.customer.customerID

    //获取本地缓存token
    let token = userinfo.token

    //获取总余额 福利金 现金
    function getAccountAmount() {
      fetch(api + '/customer/' + customerID, {
        method: "get",
        headers: {
          'Content-type': 'application/json',
          "Authorization": token
        }
      })
        .then(res => res.json())
        .then((data) => {
          $('.loading').css('display', 'none');
          // 福利金
          let welfare = data.data.welfare
          //现金
          let cash = data.data.cash
          //总余额
          let totalBalance = data.data.welfare + data.data.cash

          $('#cash').html(cash)
          $('#welfare').html(welfare)
          $('#totalBalance').html(totalBalance)

        }).catch((err) => {
          // window.location.href = './index.html'
          console.log(err)
        })
    }
    getAccountAmount()

    // 生成二维码
    var qrcode = new QRCode(document.getElementById("qrcode"), {
      width: 200,
      height: 200
    })
    let userPayCode = `${customerID}`
    qrcode.makeCode(`phone${userPayCode}`)
    // setInterval(function () { getAccountAmount() }, 3000);
    getAccountAmount()

    //监测扫码状态--WebSocket--
    var ws = new WebSocket(`ws://192.168.1.120:80/qiheGroupMeal/websocket/${customerID}`)
    // var ws = new WebSocket(`ws://49.4.79.186/groupMealSystem/websocket/${customerID}`)

    // 建立 websocket 连接成功触发事件
    ws.onopen = function (evt) {
      // 使用 send() 方法发送数据
      ws.send("发送数据")
    }

    // 接收服务端数据时触发事件
    ws.onmessage = function (evt) {

      let websocketMessage = evt.data
      let messageArray = websocketMessage.split('-')

      if (messageArray[0] == '支付成功') {
        //关闭websocket
        ws.close()
        window.location.href = `./paymentSuccessTips.html?price=${messageArray[1]}`
      }
    }
  }
</script>

</html>